<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <!-- 引入Element UI的CSS文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .el-header {
            background-color: aquamarine;
        }
        .el-main {
            background-color: darkkhaki;
            height: 300px;
        }
        .el-footer {
            background-color: bisque;
        }
        .el-aside {
            background-color: coral;
        }
    </style>
</head>
<body>
  <div id="app">
      <el-container>
          <el-header>Header</el-header>
          <el-main>main</el-main>
          <el-footer>footer</el-footer>
      </el-container>
      <h1>左右</h1>
      <el-container>
          <el-aside>aside</el-aside>
          <el-main>main</el-main>
      </el-container>
      <h1>上、下(左、右(上、下))</h1>
      <el-container>
          <el-header>header</el-header>
          <el-container>
              <el-aside>aside</el-aside>
              <el-container>
                  <el-main>main</el-main>
                  <el-footer>footer</el-footer>
              </el-container>
          </el-container>
      </el-container>
  </div>
  <!-- 引入Vue的js文件 -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- 引入Element UI的js文件 -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el : "#app",
      data : function() {
        return {

        }
      },
      methods : {

      }
    })
  </script>
</body>
</html>